<template>
  <div>
    <mengli-config v-if="showMengliConfig" :hide-title="true" />
    <div v-if="showNotifyBox" class="flex-center">
      <span class="notify-label">库存预警通知</span>
      <PlainCreateBtn
        v-if="hasRouteAuth('system:mengliRepo:userNotify') && !showMobilePage"
        @click="notifyUsersDialogOpen"
      >选择通知人</PlainCreateBtn>
      <div v-if="hasRouteAuth('system:mengliRepo:userNotify') && showMobilePage" class="mobile-link-btn" @click="notifyUsersDialogOpen">选择通知人+</div>
      <div v-if="!showMobilePage" class="sender-box-content">
        <AuditorAvatar :user-list="notifyUsers" :slice-num="5" class="avatar"/>
        <el-button v-if="notifyUsers.length > 5" type="text" class="check-more" @click="notifyAllUsersDialogOpen">查看全部</el-button>
      </div>
    </div>
    <div v-if="showMobilePage" class="sender-box-content">
      <AuditorAvatar :user-list="notifyUsers" :slice-num="5" class="avatar"/>
      <el-button v-if="notifyUsers.length > 5" type="text" class="check-more" @click="notifyAllUsersDialogOpen">查看全部</el-button>
    </div>
    <fieldTree v-if="showFieldTree" :field-items="filterFieldItems" :default-expanded-keys="defaultExpandedKeys" @getData="getData" />
    <NotifyUserDialog ref="notifyUserRef" :notify-user="notifyUsers" @storeCallback="storeCallback" />
    <AuditorCheckAllDialog
      :users="notifyUsers"
      :dialog-form-visible="notifyUsersDialogVisible"
      title="库存预警通知人"
      @close="notifyAllUsersDialogClose" />
  </div>
</template>

<script>
import fieldTree from '@/components/SettingPage/fieldTree';
import mengliConfig from '@/components/Configuration/mengliConfig';
import AuditorCheckAllDialog from '@/components/Common/auditProcess/module/auditorCheckAllDialog';
import AuditorAvatar from '@/components/Common/auditProcess/module/auditorAvatar';
import NotifyUserDialog from './components/notifyUserDialog';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
export default {
  components: {
    mengliConfig,
    fieldTree,
    NotifyUserDialog,
    AuditorAvatar,
    AuditorCheckAllDialog
  },
  props: {
    fieldItems: {
      type: Array,
      default: () => []
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    notifyUsers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      notifyUsersDialogVisible: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    showMengliConfig() {
      return hasRouteAuth('system:ipSeries:read') || hasRouteAuth('system:mengliRepo:read');
    },
    showFieldTree() {
      return hasRouteAuth('auth:system:mengli');
    },
    showNotifyBox() {
      return hasRouteAuth('system:mengliRepo:userNotify') || (this.notifyUsers && this.notifyUsers.length);
    },
    filterFieldItems() {
      const names = ['萌力订单-来源平台', '萌力库存-类型'];// 该配置不展示操作按钮
      this.fieldItems.map(i => {
        if (names.includes(i.name)) {
          i.showOperate = true;
          if (i.item && i.item.length) {
            i.item.map(j => {
              j.showOperate = true;
            });
          }
        }
      });
      return this.fieldItems;
    }
  },
  methods: {
    hasRouteAuth,
    getData() {
      this.$emit('getData');
    },
    notifyAllUsersDialogClose() {
      this.notifyUsersDialogVisible = false;
    },
    notifyAllUsersDialogOpen() {
      this.notifyUsersDialogVisible = true;
    },
    notifyUsersDialogOpen() {
      this.$refs['notifyUserRef'].dialogVisible = true;
      this.$refs['notifyUserRef'].selectedNotifyUsers = this.notifyUsers;
      this.$refs['notifyUserRef'].notifyUsers = this.notifyUsers;
    },
    storeCallback() {
      this.$emit('storeNotifyUsersCallback');
    }
  }
};
</script>

<style lang="scss" scoped>
.notify-label {
  width: 116px;
  color: #141C3D;
  font-weight: bold;
  font-size: 14px;
}
.sender-box-content {
  ::v-deep .auditor-avatar-container {
    max-width: 200px !important;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 12px 0 12px;
  .check-more {
    color: #406eff;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
  }
  .avatar {
    &::v-deep {
      .avatar-box,.ellipsis-box {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        min-width: 32px;
      }
      .ellipsis-box{
        margin-left: 5px;
      }
      .user-avatar-box{
        max-width: 145px !important;
      }
    }
  }
}
</style>
